<template>
  <div class="contact-dialog">
    <div class="project-title pl-3 h5">请您留言</div>
    <div class="form-detail pt-2" style="margin-bottom: 12px;">
      <textarea
        v-model="form.text"
        placeholder="请在此输入留言内容，我们会尽快与您联系（必填）"
        @change="resetHint"
        style="backgroud: white;"
        rows="4"
      />
      <span v-show="showhint[0]" class="hint">请留言</span>
    </div>
    <div class="form-detail">
      <input v-model="form.name" placeholder="姓名" @change="resetHint" style="backgroud: white;" />
    </div>
    <div class="form-detail">
      <input v-model="form.phone" placeholder="电话（必填）" @change="resetHint" style="backgroud: white;" />
      <span v-show="showhint[1]" class="hint">请输入电话</span>
    </div>
    <div class="form-detail">
      <input v-model="form.email" placeholder="邮箱" @change="resetHint" style="backgroud: white;" />
    </div>
    <div class="form-detail">
      <input v-model="form.location" placeholder="地址" @change="resetHint" style="backgroud: white;" />
    </div>
    <div class="submit-btn p-0 mb-2 cursor-pointer" @click="onSubmit">提交</div>
  </div>
</template>
<script>
export default {
  name: "ContactDialog",
  data() {
    return {
      form: {
        text: "",
        name: "",
        phone: "",
        email: "",
        location: ""
      },
      showhint: [false, false]
    };
  },
  props: {
    show: Boolean
  },
  computed: {},
  created() {},
  methods: {
    onSubmit() {
      if (!this.checkVal(this.form)) {
        return;
      }
      //发送请求
      //关闭窗口
      this.$emit("update:show", false);
    },
    checkVal() {
      if (!this.form.text || !this.form.phone) {
        this.showhint = [!this.form.text, !this.form.phone];
        return false;
      }
      return true;
    },
    resetHint() {
      this.showhint = [false, false];
    }
  }
};
</script>
<style lang="scss" scoped>
.contact-dialog {
  font-family: Arial;
  padding: 1em;
  .project-title {
    border-left: 2px solid #ffac24;
  }
}
.form-detail {
  margin-bottom: 17px;
  input,
  textarea {
    width: 100%;
    min-height: 46px;
    // border: 0px;
    border: 1px solid rgba(170, 185, 202, 1);
    // outline: 1px solid rgba(170, 185, 202, 1);
    padding-left: 10px;
    background: white;
    // font-weight: lighter;
    // font-family: Arial;
  }
  input::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #b6bdc5;
  }
  input:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #b6bdc5;
  }
  input::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #b6bdc5;
  }
  input:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #b6bdc5;
  }
  textarea::-webkit-input-placeholder {
    /* WebKit browsers */
    color: #b6bdc5;
  }
  textarea:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #b6bdc5;
  }
  textarea::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #b6bdc5;
  }
  textarea:-ms-input-placeholder {
    /* Internet Explorer 10+ */
    color: #b6bdc5;
  }
  input,textarea:focus {
    border: 1px solid #aab9ca;
    // box-shadow: #aab9ca 1px 1px 5px;
    box-sizing: border-box;
  }
  .hint {
    font-size: 12px;
    color: red;
  }
  .form-detail-title {
    line-height: 42px;
  }
  .select-placeholder {
    position: absolute;
    top: 22px;
    left: 25px;
    color: #b6bdc5;
    font-weight: lighter;
    font-family: Arial;
  }
  .disableHint {
    display: none;
  }
}
.submit-btn {
  width: 100%;
  background-color: #ffac24;
  color: white;
  height: 52px;
  line-height: 52px;
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}
</style>
